<template>
	<div id="app">
		<router-view></router-view>
		<tabbar>
			<tabbar-item selected link="/">
				<span slot="label">随便看</span>
			</tabbar-item>
			<tabbar-item show-dot link="/tourl/scanStore">
				<span slot="label">逛店</span>
			</tabbar-item>
			<tabbar-item badge="2" link="/tourl/publishThought">
				<span slot="label">发布</span>
			</tabbar-item>
			<tabbar-item badge="2" link="/tourl/myself">
				<span slot="label">I'm</span>
			</tabbar-item>
		</tabbar>
		<div v-transfer-dom>
			<loading :show="this.$store.state.loading" :text="('loading')"></loading>
			<!--<alert :value="this.$store.state.isAlert" :title="('')" @on-show="onShow" @on-hide="onHide">{{this.$store.state.alertContent}}</alert>-->
			<toast :value="this.$store.state.isToast" type="text" :time="1000" is-show-mask text="" @on-hide="onHide" :position="('middle')">{{this.$store.state.toastContent}}</toast>
		</div>
	</div>
</template>
<script>
	import { Tabbar, TabbarItem, Toast, Alert, Grid, GridItem, Loading, TransferDomDirective as TransferDom } from 'vux'

	export default {
		name: 'app',
		components: {
			Tabbar,
			TabbarItem,
			Toast,
			Alert,
			Loading,
			Grid,
			GridItem
		},
		methods: {
			onItemClick(val) {
				this.$router.push({
					path: val
				});
			},
			onHide() {
				this.$store.commit('updateToast', '');
			},
			onShow() {

			}
		},
		directives: {
			TransferDom
		}
	}
</script>

<style lang="less">
	@import '~vux/src/styles/reset.less';
	body {
		background-color: #fbf9fe;
		height: 96%;
	}
	
	html {
		height: 100%;
	}
	
	.weui-grid {
		padding: 0 !important;
		height: 50px;
	}
	
	.grid-center {
		display: block;
		text-align: center;
		line-height: 50px;
		color: #666;
		height: 100%;
	}
	
	.weui-dialog__bd {
		color: #000 !important;
	}
	
	#app {
		height: 96%;
	}
</style>